import { _btn } from './btn.js';
import { dom, _closest, _query, _style, _events, _content, _addClassName, _removeClassName } from './dom.js'
import { _inspector } from './inspector.js'
import { exportSVG, exportCanvasAsPNG, exportJSON } from '../utils/index.js'
let showMap = {};

export const inspectorList = ['inspector', 'grammar', 'graphic']


inspectorList.forEach(t => [
    showMap[t] = true
])

const _hide = (item) => {
    _removeClassName(item, 'active')
    // _style(item, {
    //     right: null
    // })

    // let rightside = _query('.main .main-right')
    // _style(rightside, {
    //     width: 0
    // })
}


const _show = (item) => {
    _addClassName(item, 'active')
    // _style(item, {
    //     right: 0
    // })
    // let rightside = _query('.main .main-right')
    // _style(rightside, {
    //     width: '200px'
    // })
}

const _hideRightAside = () => {
    let rightside = _query('.main .main-right')
    _style(rightside, {
        width: 0
    })
}
const _showRightAside = () => {
    let rightside = _query('.main .main-right')
    _style(rightside, {
        width: '200px'
    })
}
export const hideInspector = () => {
    inspectorList.forEach(t => {
        let item = _query(`.main .${t}`)
        if (item) {
            _hide(item)
            showMap[t] = true
        }

    })
    _hideRightAside()
}


export const showInspector = (key) => {
    inspectorList.forEach(t => {
        let item = _query(`.main .${t}`)
        if (item) {
            _hide(item)
            showMap[t] = true
            if (t === key) {
                if (showMap[key]) {
                    _show(item)
                    showMap[key] = false
                    _showRightAside()
                }
            }
        }

    })
}

export const toggleInspector = (key) => {
    inspectorList.forEach(t => {
        let item = _query(`.main .${t}`)
        if (item) {
            _hide(item)
            if (t === key) {
                if (showMap[key]) {
                    _show(item)
                    showMap[key] = false
                    _showRightAside()
                } else {
                    showMap[t] = true
                    _hideRightAside()
                }
            }
        }
    })
}

export const _g2 = () => {
    let grammar = dom.div("in", {
        class: 'grammar'

    }, () => {
        showInspector("grammar")
    })

    let graphic = dom.div("out", {
        class: 'graphic'
    }, () => {
        showInspector("graphic")
    })

    let g2 = dom.div([grammar, graphic], {
        class: 'g2'
    })
    return g2

}

// 语法
export const _grammar = (t => {

    let data = JSON.stringify(t.content)
    let str = data.replace(/.*?,/g, (a) => `${a}<br>`)

    let grammar = dom.div(str, {
        class: 'grammar-content',
        isHtml: true
    })

    let btn = _btn('saveAs', {
        class: 'primary'
    }, () => {

        exportJSON(data, t.name)
    })

    return dom.div([grammar, btn], {
        class: ''
    })


})

// 图形
export const _graphic = (t) => {
    let name = t.name
    let panel = _query(`.screen-viewer .panel[name=${name}]`)
    let data = ""
    let type = ''
    if (panel) {
        let firstchild = panel.firstChild
        if (/CANVAS/i.test(firstchild.nodeName)) {
            data = firstchild.toDataURL('image/png')
            type = 'png'
        } else {
            data = panel.innerHTML
            type = 'svg'
        }
    }

    let btn = _btn('saveAs', {
        class: 'primary'
    }, () => {
        if (type === 'svg') {
            exportSVG(data, name)
        } else if (type === 'png') {
            exportCanvasAsPNG(data, name)
        }
    })

    let graphic = dom.div(data, {
        class: 'graphic-content',
    })
    return dom.div([graphic, btn], {
        class: ''
    })

}

_events(document.body, {
    mousedown: (e) => {
        let el = e.target
        let inScreen = ['screen-viewer', 'nav', 'navtree', 'toolbar', 'grammar', 'graphic', ...inspectorList].some(t => _closest(el, `.${t}`))
        if (inScreen) return
        hideInspector()
    }
})


export const inspectorFnMap = {
    inspector: _inspector,
    grammar: _grammar,
    graphic: _graphic
}

export const rerenderInspector = (t, list = inspectorList) => {
    list.forEach(key => {
        let conent = inspectorFnMap[key](t)
        let container = _query(`.main .${key}`)
        container && _content(container, conent)
    })
}
